﻿<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
{% load staticfiles %}
<meta charset="UTF-8" />
<title>eFilm - Categoría</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, , initial-scale=1.0">

<link href="http://livedemo00.template-help.com/opencart_49582/image/data/favicon.png" rel="icon" />

<link href="{% static 'css/monster/bootstrap.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'css/monster/cloud-zoom.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'css/monster/stylesheet.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'css/monster/font-awesome.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'css/monster/slideshow.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'css/monster/jquery.prettyPhoto.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'css/monster/camera.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'css/monster/superfish.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'css/monster/responsive2.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'css/monster/photoswipe.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'css/monster/jquery.bxslider.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'css/monster/colorbox.css' %}" rel="stylesheet" type="text/css"  media="screen" />
<link href="{% static 'css/monster/jquery-ui-1.8.16.custom.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'css/monster/jquery.fancybox-1.3.4.css' %}" rel="stylesheet" type="text/css" media="screen" />
<link href="{% static 'css/monster/livesearch.css' %}" rel="stylesheet" type="text/css" />
<link href='//fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Roboto+Slab:400,700,100,300' rel='stylesheet' type='text/css'>

<script src="{% static 'js/monster/jquery-1.10.2.min.js' %}"></script>
<script src="{% static 'js/monster/jquery-migrate-1.2.1.min.js' %}"></script>
<script src="{% static 'js/monster/jquery-ui-1.8.16.custom.min.js' %}"></script>
<script src="{% static 'js/monster/jquery.cookie.js' %}"></script>
<script src="{% static 'js/monster/jquery.fancybox-1.3.4.pack.js' %}"></script>
<script src="{% static 'js/monster/jquery.colorbox.js' %}"></script>
<script src="{% static 'js/monster/jquery.jcarousel.min.js' %}"></script>
<script src="{% static 'js/monster/jquery.cycle.js' %}"></script>
<script src="{% static 'js/monster/bootstrap.js' %}"></script>
<script src="{% static 'js/monster/tabs.js' %}"></script>
<script src="{% static 'js/monster/jQuery.equalHeights.js' %}"></script>
<script src="{% static 'js/monster/jquery.elevatezoom.js' %}"></script>
<script src="{% static 'js/monster/jquery.prettyPhoto.js' %}"></script>
<script src="{% static 'js/monster/jscript_zjquery.anythingslider.js' %}"></script>
<script src="{% static 'js/monster/jquery.nivo.slider.pack.js' %}"></script>
<script src="{% static 'js/monster/jquery.mobile-events.js' %}"></script>
<script src="{% static 'js/monster/superfish.js' %}"></script>
<script src="{% static 'js/monster/script.js' %}"></script>
<script src="{% static 'js/monster/camera.js' %}"></script>
<!-- bx-slider -->
<script src="{% static 'js/monster/jquery.bxslider.js' %}"></script>
<!-- photo swipe -->
<script src="{% static 'js/monster/klass.min.js' %}"></script>
<script src="{% static 'js/monster/code.photoswipe.jquery-3.0.5.js' %}"></script>
<!--<script src="{% static 'js/monster/jquery.total-storage.min.js' %}"></script>-->

<!--[if IE]>
<script src="catalog/view/theme/theme415/js/html5.js' %}"></script>
<![endif]-->
<!--[if lt IE 8]><div style='clear:both;height:59px;padding:0 15px 0 15px;position:relative;z-index:10000;text-align:center;'><a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." /></a></div><![endif]-->
<!--[if IE]>
<script src="catalog/view/theme/theme415/js/sl/jscript_zjquery.anythingslider.js' %}"></script>
<![endif]-->
<!--[if  IE 8]>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/theme415/stylesheet/ie8.css' %}" />
<![endif]-->
<!--[if  IE 8]>
<script src="catalog/view/theme/theme415/js/respond.js' %}"></script>
<![endif]-->
<!--[if  IE 8]>
<script src="catalog/view/theme/theme415/js/matchmedia.polyfill.js' %}"></script>
<![endif]-->
<!--[if  IE 8]>
<script  src="catalog/view/theme/theme415/js/matchmedia.addListener.js' %}"></script>
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/theme415/stylesheet/ie6.css' %}" />
<script type="text/javascript" src="catalog/view/javascript/DD_belatedPNG_0.0.8a-min.js' %}"></script>
<script type="text/javascript">
DD_belatedPNG.fix('#logo img');
</script>
<![endif]-->
<script>
	if (navigator.userAgent.match(/Android/i)) {
		var viewport = document.querySelector("meta[name=viewport]");
	}
	if(navigator.userAgent.match(/Android/i)){
		window.scrollTo(0,1);
	}
</script> 
</head>

<body class="product-manufacturer-info"><a id="hidden" href="http://livedemo00.template-help.com/opencart_49582/"></a>
	<div id="body">
		{% include 'monster/headermovil.html' %}
		<div id="page">
			<div id="shadow">
				<div class="shadow"></div>
				{% include 'monster/header.html' %}
				
					<section>
						<div id="container">
							<p id="back-top"><a href="#top"><span></span></a></p>
							<div class="container">
								<div id="notification"></div>
								<div class="row">
									<div class="col-sm-12" id="content">  
										<div class="breadcrumb">
											<a href="{% url 'monster' %}">Home</a>
											 &raquo; <a>Géneros</a>
											 &raquo; <a>{{nombreGenero}}</a>
										</div>
										
										<h1>{{nombreGenero}}</h1>
											<div class="product-filter">
												<div class="display"><b>Display:</b> <a id="list_a" onclick="display('list');"><i class="fa fa-list"></i></a>  <div id="grid_b"><i class="fa fa-th"></i></div></div>

												<div class="sort">Mostrar: 
													<select onchange="location = this.value;">
														<option value="" selected="selected">8</option>
														<option value="">25</option>
														<option value="">50</option>
														<option value="">75</option>
														<option value="">100</option>
													</select>
												</div>
											</div>
  
											<div class="product-grid">
												<ul class="row">
												{% for m in movies_por_categoria %}
													<li class="col-sm-3">
														<div class="padding">
															<div class="image">
                                                                <a href="{% url 'infoPeli' m.id_XML %}">
                                                                <img id="img_{{m.id_XML}}" style="max-height: 387px;" onerror="if (this.src != '{% static 'images/portadaVaciaGrande.png' %}') this.src = '{% static 'images/portadaVaciaGrande.png' %}';" src="{{m.artwork}}" title="{{m.title}}" alt="{{m.title}}" /></a>
                                                                </div>
															<div class="left">
																<div class="name">
																	<a href="{% url 'infoPeli' m.id_XML %}">{{m.title}}</a>
																</div>
																<div class="rating">
																	<img height="13" src="{% static 'images/stars-5.png' %}" alt="Based on 1 reviews." />
																</div>
																<div class="description">{{m.plot}}</div>
																<div class="price">
																   <span class="price-new"></span> 
																</div>
																<div class="cart-button">
																	<div class="cart">
																		<a class="button" title="Obtener código"><span>Obtener código</span></a>
																	</div>
																	<div class="clear"></div>
																</div>
															</div>
														  
														</div>
													</li>
												{% endfor %}
												</ul>
											</div>
  
											<div class="pagination">
												<div class="links">
													
													{% if movies_por_categoria.has_previous %}
													<a href="{% url 'categoria' genero.pk %}?page=1">|&lt;</a>
											            <a href="{% url 'categoria' genero.pk %}?page={{ movies_por_categoria.previous_page_number }}">&lt;</a>
											            <a href="{% url 'categoria' genero.pk %}?page={{ movies_por_categoria.previous_page_number }}">{{movies_por_categoria.previous_page_number}}</a>
											        {% endif %}
													<b>{{ movies_por_categoria.number }}</b>  
													{% if movies_por_categoria.has_next %}
														<a href="{% url 'categoria' genero.pk %}?page={{ movies_por_categoria.next_page_number }}">{{movies_por_categoria.next_page_number}}</a>
											            <a href="{% url 'categoria' genero.pk %}?page={{ movies_por_categoria.next_page_number }}">&gt;</a>
											            <a href="{% url 'categoria' genero.pk %}?page={{ movies_por_categoria.paginator.num_pages }}">&gt;|</a>
											        {% endif %}
											        
												</div>
												<div class="results">Mostrando página {{ movies_por_categoria.number }} de {{ movies_por_categoria.paginator.num_pages }}</div>
											</div>
									</div>

									
<script type="text/javascript"><!--
function display(view) {
	if (view == 'list') {
		$('.product-grid ').attr('class', 'product-list');
		$('.product-list ul').removeClass('row');
		$('.product-list ul li').removeClass('col-sm-3');
		$('.product-list ul li').each(function(index, element) {
			html = '';
					html += '<div class="row">';
			var image = $(element).find('.image').html();
			
			if (image != null) {
				html += '<div class="image col-sm-3">' + image + '</div>';
			}
			html += '<div class="left col-sm-9">';
				html += '<div class="name">' + $(element).find('.name').html() + '</div>';
				var rating = $(element).find('.rating').html();
				if (rating != null) {
					html += '<div class="rating">' + rating + '</div>';
				}
				html += '<div class="description">' + $(element).find('.description').html() + '</div>';
				var price = $(element).find('.price').html();
				if (price != null) {
					html += '<div class="price">' + price  + '</div>';
				}
				html += '<div class="cart-button">';
				html += '<div class="cart">' + $(element).find('.cart').html() + '</div>';
				//html += '<div class="wishlist">' + $(element).find('.wishlist').html() + '</div>';
				//html += '<div class="compare">' + $(element).find('.compare').html() + '</div>';
				html += '<div class="clear">' + $(element).find('.clear').html() + '</div>';
				html += '</div>';
				
				html += '</div>';
				html += '</div>';
			

						
			$(element).html(html);
		});		
		
		$('.display').html('<b>Display:</b> <div id="list_b"><i class="fa fa-list"></i></div> <a id="grid_a" onclick="display(\'grid\');"><i class="fa fa-th"></i></a>');
		
		$.totalStorage('display', 'list'); 
	} else {
		$('.product-list').attr('class', 'product-grid');
		$('.product-grid ul').addClass('row');
		$('.product-grid ul li').addClass('col-sm-3');
		$('.product-grid ul li').each(function(index, element) {
			html = '';
					
			var image = $(element).find('.image').html();
			html += '<div class="padding">';
			if (image != null) {
				html += '<div class="image">' + image + '</div>';
			}
			html += '<div class="left">';
					
			html += '<div class="name">' + $(element).find('.name').html() + '</div>';
			var rating = $(element).find('.rating').html();
			
			if (rating != null) {
				html += '<div class="rating">' + rating + '</div>';
			}
			var price = $(element).find('.price').html();
			
			if (price != null) {
				html += '<div class="price">' + price  + '</div>';
			}
			html += '<div class="description">' + $(element).find('.description').html() + '</div>';
			
			
			html += '<div class="cart-button">';
			html += '<div class="cart">' + $(element).find('.cart').html() + '</div>';
			//html += '<div class="wishlist">' + $(element).find('.wishlist').html() + '</div>';
			//html += '<div class="compare">' + $(element).find('.compare').html() + '</div>';
			html += '<div class="clear">' + $(element).find('.clear').html() + '</div>';
			html += '</div>';
			
			
			html += '</div></div>';
			$(element).html(html);
		});	
					
		$('.display').html('<b>Display:</b> <a id="list_a" onclick="display(\'list\');"><i class="fa fa-list"></i></a>  <div id="grid_b"><i class="fa fa-th"></i></i></div>');
		
		$.totalStorage('display', 'grid');
	}
	if ($('body').width() > 940) {
	// tooltip demo
		$('.tooltip-toggle').tooltip({
		selector: "a[data-toggle=tooltip]"
		})
		$('.tooltip-1').tooltip({
			placement:'bottom'
		})
		$('.tooltip-2').tooltip({
			placement:'top'
		})
		}
	
}

view = $.totalStorage('display');

if (view) {
	display(view);
} else {
	display('grid');
}
//--></script>




<div class="clear"></div>
</div>
</div>
</div>
<div class="clear"></div>
</section>



			{% include 'monster/footer.html' %}

			</div>
		</div>
	</div>

</body></html>